<template>
    <!--    // 计算器结果框组件-->
    <div>
        <input id="input-box" type="text" v-model="value" readonly/>
    </div>
</template>

<script>
    export default {
        name: "ResultBox",
        // 父子通信
        props: ['getValue'],
        // 计算属性
        computed: {
            value() {
                return this.getValue
            },
        },
    }
</script>

<style scoped>
    input{
        display: block;
        width: 100%;
        height: 46px;
        margin-bottom: 15px;
        border: none;
        border-radius: 2px;
        background: rgb(255,250,227);
        box-shadow: 0 4px #ece9e9 inset;
        padding: 0 5px;
        text-align: right;
        font-size: 20px;
        color: #333744;
        font-weight: bold;
        letter-spacing: 1px;
    }
</style>
